<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<title>Ajax With Jquery</title>
		<style type="text/css" media="screen">
			body{
				background-color:#111;
				color:#999;
				font-family: Arial, "MS Trebuchet", sans-serif;
			}
			#display{
				padding-top:10px;
				color: white;
			}
		</style>
		
		<script src="/public/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			
			$(document).ready(function(){
				$('#txtValue').keyup(function(){
					sendValue($(this).val());	
				});	
			});
			
			function sendValue(str){
				$.post("/application/models/ajax.php", { sendToValue: str },
				function(data){
				    $('#display').html(data.returnFromValue);
				}, "json");
			}

		</script>
	</head>
		

	<body>
		<p>On keyup this text box sends a request to PHP and a value is returned.</p>
		<label for="txtValue">Enter a value : </label><input type="text" name="txtValue" value="" id="txtValue">
		<div id="display">////</div>
	</body>
</html>